<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网易注册</title>
    <style>
        .container{
            width: 600px;
            border: solid 1px;
            border-radius: 10px;
            padding: 10px 40px;
        }
        .titleTd {
            text-align: right;
            font-family: '宋体';
        }
        tr{
            height: 30px;
        }

        .error {
            font-size: 12px;
            border: solid 1px #FF3300;
            background-color: #FFF2E5;
            height: 21px;
            padding:2px 3px;
        }
        .ok{
            font-size: 12px;
            border: solid 1px #01BE00;
            background-color: #E6FEE4;
            height: 21px;
            padding:2px 3px;
        }
        .warn{
            font-size: 12px;
            border: solid 1px #FFCD00;
            background-color: #FFFFDA;
            height: 30px;
            padding:2px 3px;
        }
    </style>
</head>
<body>
<img src="../images/register_logo.gif">
<div class="container">
    <form action="#">
        <table>
            <tr>
                <td class="titleTd">通行证用户名:</td>
                <td>
                    <input type="text" size="14" name="username">@163.com
                </td>
                <td>
                    <div class="error" style="width: 249px;">
                        <img src="../images/error.gif">通行证用户名不能为空,请输入通行证用户名
                    </div>
                </td>
            </tr>
            <tr>
                <td class="titleTd">登录密码:</td>
                <td><input type="password" size="20" name="password"></td>
                <td>
                    <div class="error" style="width: 153px;">
                        <img src="../images/error.gif">密码不能为空,请输入密码
                    </div>
                </td>
            </tr>
            <tr>
                <td class="titleTd">重复登录密码:</td>
                <td><input type="password" size="20" name="rePassword"></td>
                <td>
                    <div class="error" style="width: 200px;">
                        <img src="../images/error.gif">重复密码不能为空,请重复输入密码
                    </div>
                </td>
            </tr>
            <tr>
                <td class="titleTd">性别:</td>
                <td>
                    <input type="radio" name="gender" value="man" checked>男
                    <input type="radio" name="gender" value="woman">女
                </td>
            </tr>
            <tr>
                <td class="titleTd">真实姓名:</td>
                <td>
                    <input type="text" size="20" name="name">
                </td>
            </tr>
            <tr>
                <td class="titleTd">昵称:</td>
                <td><input type="text" size="20" name="nikeName"></td>
                <td>
                    <div class="ok" style="width: 90px;">
                        <img src="../images/ok.gif">昵称输入正确
                    </div>
                </td>
            </tr>
            <tr>
                <td class="titleTd">关联手机号:</td>
                <td><input type="text" size="20" name="phone"></td>
                <td>
                    <div class="warn" style="width: 165px;">
                        1、手机号码以13，15，18开头<br>
                        2、手机号码由11位数字组成
                    </div>
                </td>
            </tr>
            <tr>
                <td class="titleTd">保密邮箱:</td>
                <td><input type="text" size="20" name="email"></td>
                <td>
                    <div class="error" style="width: 200px;">
                        <img src="../images/error.gif">保密邮箱不能为空,请输入保密邮箱
                    </div>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="image" src="../images/button.gif">
                </td>
                <td></td>
            </tr>
        </table>
    </form>
</div>
</body>
</html>